import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_uikit/widget/text/text_widget.dart';
import 'package:get/get.dart';

import '../../common/object_util/object_util.dart';
import '../../common/app_text_style.dart';

class InputDialogWidget extends StatefulWidget {
  InputDialogWidget(
    this.title, {
    super.key,
    this.count = 4,
    this.canceEvent,
    this.sureEvent,
    this.onChangedEvent,
  });

  /// 标题
  final String? title;

  /// 输入框个数
  final int count;

  /// 输入框List
  final List? inputList = [];

  /// 取消点击事件
  final Function()? canceEvent;

  /// 确认点击事件
  final Function(String? content)? sureEvent;

  /// 输入框改变事件
  final Function(String? content)? onChangedEvent;


  @override
  State<InputDialogWidget> createState() => InputDialogWidgetState();
}

class InputDialogWidgetState extends State<InputDialogWidget> {
  /// 文本框内容
  late String textEditingContent = "";

  @override
  Widget build(BuildContext context) {
    for (int i = 0; i < widget.count; i++) {
      TextEditingController textEditingController = TextEditingController();
      widget.inputList!.add({
        "index": i,
        "content": textEditingController,
        "autoFocus": i == 0 ? true : false
      });
    }
    return Container(
      width: 280.w,
      height: 225.w,
      decoration: BoxDecoration(
        color: const Color(0xFFFFFFFF),
        borderRadius: BorderRadius.circular(16.w),
      ),
      child: Column(
        children: [
          SizedBox(height: 24.w),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 32.w),
            child: TextWidget(widget.title, TS_FF000000_16_W5),
          ),
          SizedBox(height: 24.w),
          buildOtpInputWidget(),
          SizedBox(height: 32.w),
          buildBottomButton()
        ],
      ),
    );
  }

  /// 构建底部操作组件
  Widget buildBottomButton(){
   return  Container(
      margin: EdgeInsets.only(left: 20.w, right: 20.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            onTap: () {
              //取消点击事件
              if (ObjectUtil.isNotEmpty(widget.canceEvent)) {
                widget.canceEvent!();
              }
              Get.back();
            },
            child: Container(
              height: 48.w,
              width: 104.w,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(24.w)),
                  color: const Color(0xFFF4F2FC)),
              child: TextWidget("取消", TS_D91D2129_18_W4),
            ),
          ),
          GestureDetector(
            onTap: () {
              // 确定点击事件
              if (textEditingContent.length == widget.count) {
                if(ObjectUtil.isNotEmpty(widget.sureEvent)){
                  widget.sureEvent!(textEditingContent);
                }
                Get.back();
              }
            },
            child: Container(
                height: 48.w,
                width: 104.w,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(24.w)),
                    color: const Color(0xFF722ED1)),
                child: TextWidget('确定', TS_FFFFFFFF_18_W4)),
          )
        ],
      ),
    );
  }

  /// 构建验证码输入框组件
  Widget buildOtpInputWidget() {
    return  Container(
      margin: EdgeInsets.only(left: 16.w, right: 16.w),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: widget.inputList!.map((e) {
              // return buildOtpInputItemWidget(
              //     e["content"], true, context, ++e["index"]);
              return Flexible(child:buildOtpInputItemWidget(
                  e["content"], true, context, ++e["index"]));
            }).toList()),
      );
  }

  /// 构建验证码输入框Item组件
  Widget buildOtpInputItemWidget(TextEditingController controller,
      bool autoFocus, BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF7F5FA),
        borderRadius: BorderRadius.all(Radius.circular(8.w)),
      ),
      height: 48.w,
      width: 48.w,
      child: TextField(
          autofocus: autoFocus,
          textAlign: TextAlign.center,
          inputFormatters: [FilteringTextInputFormatter.digitsOnly],
          keyboardType: TextInputType.number,
          controller: controller,
          maxLength: 1,
          cursorColor: const Color(0xFF333333),
          decoration: InputDecoration(
              //border: OutlineInputBorder(),
              border: InputBorder.none,
              counterText: '',
              hintStyle: TextStyle(
                  color: const Color(0xFFFFFFFF),
                  fontSize: 12.sp,
                  fontWeight: FontWeight.w500,
                  height: 1.3.w)),
          onChanged: (value) {
            if (value.length == 1 && index < widget.count) {
              FocusScope.of(context).nextFocus();
            } else if (value.isEmpty && index > 1) {
              FocusScope.of(context).previousFocus();
            }

            String content = "";
            for (Map map in widget.inputList!) {
              TextEditingController textEditingController = map["content"];
              content = content + textEditingController.text;
            }
            if (ObjectUtil.isNotEmpty(widget.onChangedEvent)) {
              widget.onChangedEvent!(content);
            }
            textEditingContent = content;
          }),
    );
  }
}
